const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const HTMLPlugin = require('html-webpack-plugin');
const DirectoryTreePlugin = require('directory-tree-webpack-plugin');
const common = require('./webpack.common.js');
const { enhance, filter, sort } = require('./src/utilities/content-tree-enhancers.js');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = env => merge(common(env), {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    index: './index.jsx'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(),
    new HTMLPlugin({
      template: 'index.html',
      favicon: 'favicon.ico',
    }),
    new DirectoryTreePlugin({
      dir: 'src/content',
      path: 'src/_content.json',
      extensions: /\.mdx?/,
      enhance,
      filter,
      sort
    })
  ],
  devServer: {
    static: path.resolve(__dirname, './dist'),
    port: 3000,
    hot: true,
    compress: true,
    historyApiFallback: true
  }
});
